<html>
<head>
<title>QtWebEngine Remote Debugging</title>
<style>
body {
  color: #222;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
}

#caption {
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 20px;
  height: 20px;
  text-align: left;
}

#items {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.item {
  color: #222;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  padding: 10px;
  -webkit-transition-property: background-color, border-color;
  -webkit-transition: background-color 0.15s, 0.15s;
  -webkit-transition-delay: 0ms, 0ms;
}

.item:not(.connected):hover {
  background-color: rgba(242, 242, 242, 1);
  border-color: rgba(110, 116, 128, 1);
  color: black;
}

.item.connected:hover {
  border-color: rgba(184, 184, 184, 1);
  color: rgb(110, 116, 128);
}

.description {
  display: flex;
  flex-direction: column;
}

.title, .subtitle {
  font-size: 13px;
  margin: 4px 0px 0px 6px;
  overflow: hidden;
  padding-left: 20px;
}

.title {
  background-repeat: no-repeat;
  background-size: 16px;
  font-size: 15px;
}


</style>

<script>

function onLoad() {
  var tabsListRequest = new XMLHttpRequest();
  tabsListRequest.open('GET', '/json/list', true);
  tabsListRequest.onreadystatechange = onReady;
  tabsListRequest.send();
}

function onReady() {
  if(this.readyState == 4 && this.status == 200) {
    if(this.response != null)
      var responseJSON = JSON.parse(this.response);
      for (var i = 0; i < responseJSON.length; ++i)
        appendItem(responseJSON[i]);
  }
}

function overrideFrontendUrl(item) {
  if (window.location.hash) {
    var overridden_url = window.location.hash.substr(1);
    var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws=');
    if (overridden_url.indexOf('?') == -1)
      return overridden_url + '?' + ws_suffix;
    else
      return overridden_url + '&' + ws_suffix;
  }
  return item.devtoolsFrontendUrl;
}

function appendItem(item_object) {
  var item_element;
  if (item_object.devtoolsFrontendUrl) {
    item_element = document.createElement('a');
    item_element.href = overrideFrontendUrl(item_object);
    item_element.title = item_object.title;
  } else {
    item_element = document.createElement('div');
    item_element.className = 'connected';
    item_element.title = 'The tab already has an active debug session';
  }
  item_element.classList.add('item');

  var description = document.createElement('div');
  description.className = 'description';

  var title = document.createElement('div');
  title.className = 'title';
  title.textContent = item_object.description || item_object.title;
  title.style.cssText = 'background-image:url(' +
      item_object.faviconUrl + ')';
  description.appendChild(title);

  var subtitle = document.createElement('div');
  subtitle.className = 'subtitle';
  subtitle.textContent = (item_object.url || '').substring(0, 300);
  description.appendChild(subtitle);

  item_element.appendChild(description);

  document.getElementById('items').appendChild(item_element);
}
</script>
</head>
<body onload='onLoad()'>
  <div id='caption'>Inspectable pages</div>
  <hr>
  <div id='items'>
  </div>
</body>
</html>
